//node 语法
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin"); //1.将指定的html页面生成在 根host内存中，所以我们打开host就可以直接打开index.html页面,2.并且自动引入内村中的main.js引入

const htmlPlugin = new HtmlWebpackPlugin({
    template: path.join(__dirname, "./src/index.html"), //将指定目标html文件，打包生成在内存中
    filename: "index.html",
});
module.exports = {
    //webpack 4.x中，我们可以不用配置entry入口和output出口，约定入口为scr/index.js ,约定大于配置
    mode: "development",
    plugins: [htmlPlugin],
    module: {
        //所有第三方的匹配规则，webpack默认只能打包.js文件
        rules: [{
                test: /\.js|jsx$/,
                use: "babel-loader",
                exclude: /node_modules/,
            },
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"],

                //表示为 .css 的文件启动模块化，只有自己引入的组件样式才会作用生效
            },
            {
                test: /\.ttf|woff|woff2|eot|svg$/,
                use: "url-loader", //处理字体文件的loader
            },
            {
                test: /\.scss$/,
                use: ["style-loader", "css-loader?modules", "sass-loader"],
            },
        ],
    },
    resolve: {
        extensions: [".js", ".jsx", ".json"], //表示这几个类型文件的后缀名可以不写
        alias: {
            "@": path.join(__dirname, "./src"), //@此时就代表当前的决定路径+同级目录中的src
        },
    },
};

//es6语法  export default {}; 目前不行，webpack是node写的，不支持es6语法，只支持node的语法
// chrome支持的 node支持（node中运用了chrome的V8引擎） node支持的 we
//安装 webpack-dev-server 可以热更新打包,打包好的main.js是托管在根目录的内存中，我们看不见但是可以去引用